<!--

用户批量导入

-->
<!DOCTYPE html>
<html class="k-webkit k-webkit99">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Hand Application Platform</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="_csrf" content="36ca4314-d960-42a9-b927-160ef0f857e2">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">

    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.default-main.min.css" rel="stylesheet" type="text/css"/>

    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js"></script>
    <script src="/wedding_admin/js/bootstrap/jquery.blockui.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>

</head>
<body>


<style type="text/css">
    .file {
        position: relative;
        display: inline-block;
        background: #FFF;
        border: 1px solid #eaf4fc;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #004974;
        text-decoration: none;
        text-indent: 0;
        font-size: 10px;

    }

    .file input {
        position: absolute;
        right: 0;
        top: 0;
        opacity: 0;

    }

    .file:hover {
        background: #faf9f9;
        border-color: #FFF;
        color: #54565B;
        text-decoration: none;
    }


    h5, h4 {
        font-weight: normal;
        font-size: 15px
    }


</style>


<div class="page-content" id="rrapp">

    <div class="form-horizontal">
        <div class="panel-heading">
            <span class="k-icon my-custom-icon-class"></span>
            <span class="panel-title">人员批量导入</span>
        </div>
        <div class="panel-heading" id="status_001">
            <span class="panel-title">操作结果:</span>
            <span class="panel-title" style="color: red" id="status_002"></span>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">Excel文件</label>
                    <div class="col-md-4">
                        <!--TODO 地址需要修改-->

                        <input disabled="disabled" name="xlsGcode" id="sys-xls"/>
                        <a href="javascript:void(0);" class="file btn">
                            选择文件 <input type="file" id="sys_xls_values" name="sys-logo-img-uploader"
                                        onchange="preview(this,'sys-xls');">
                        </a>

                        <button class="btn btn-success" @click="addUserList">
                            上传
                        </button>

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group ">
                    <label class="col-sm-3 control-label">模板文件</label>
                    <div class="col-sm-4">

                        <h4><a href="/wedding_admin/statics/xls/user.xls" style="color: red">下载模板</a> 请下载模板文件，填入数据后导入!
                        </h4>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group ">
                    <label class="col-sm-3 control-label">导入说明</label>
                    <div class="col-sm-6">
                        <h4 style="color: red">1、基本信息固定字段:用户名称、用户账号、用户密码、所属部门、所属角色、
                            用户编号、用户性别不能为空必填列。
                            <br>
                            2、唯一字段:用户账号、用户编号不能重复。
                            <br>
                            3、用户所属角色多个需,分割 如：管理员,555,444。

                        </h4>

                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<script type="text/javascript">

    var vm = new Vue({
        el: '#rrapp',
        data: {

            roleList: {},
            dict: {}

        },
        mounted() {
            //初始化执行方法

            this.getImgPath()


        },
        methods: {

            getImgPath: function () {
                $("#status_001").hide();


            },
            addUserList: function () {

                var formData = new FormData(); //创建一个formData对象实例
                var excelFile = $("#sys_xls_values").get(0).files[0];
                if (excelFile == null) {
                    alert("文件夹为空")
                    return
                }
                formData.append("file", excelFile)
                var load = layer.load(0, {//加载动作
                    shade: false,
                    time: 2 * 10000
                });
                var url = "/wedding_admin/sys/sysuser/addUserList";
                $.ajax({
                    type: "POST",
                    url: url,
                    contentType: false, // 必须false才会自动加上正确的Content-Type
                    processData: false, // 必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
                    data: formData,
                    success: function (r) {
                        if (r.code === 0) {

                            layer.close(load);//手动关闭
                            $("#status_001").show()
                            $('#status_002').html(r.msg);
                            //  parent.location.reload();//刷新父类页面
                            //    window.parent.$("#Import").data("kendoWindow").close();
                        } else {
                            layer.close(load);//手动关闭
                            $("#status_001").show()
                            $('#status_002').html(r.msg);
                        }
                    }
                });
            }

        }
    })

    var preview = function (file, container) {
        var file = file.files[0];//获取文件对象
        var type = file.name.split('.')[1];//获取文件类型

        type = type.toLowerCase();//转换为小写
        if (type != 'xls') {
            alert("必须上传.xls格式的文件")
            $('#' + container).val('');
            $('#sys_xls_values').value = '';

            return;
        }
        $('#' + container).val(file.name);


    }


</script>

</body>
</html>
